<!-- 无房屋有设备 -->
<!--<link rel="stylesheet" href="../../../../node_modules/bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css">-->
<template>
  <div class="body_" :style="{'height': (propHeight || height) + 'px'}">
    <div class="top_container">
      <el-tooltip content="区域" placement="bottom-start" effect="light">
        <svg-icon ref="icon1" class="top_icon1" icon-class="nhgk_tree" @mouseleave="iconMove(1)"
                  @mouseenter="iconEnter(1)" @click="iconClick('louyu')"
        />
      </el-tooltip>
      <el-tooltip :content="rightIconText" placement="bottom-start" effect="light">
        <svg-icon ref="icon2" title="设备" class="top_icon2" icon-class="nhgk_device" @mouseleave="iconMove(2)"
                  @mouseenter="iconEnter(2)" @click="iconClick('shebei')"
        />
      </el-tooltip>
    </div>
    <div v-if="selected === 'louyu'" class="tree_div">
      <div class="search">
        <el-input v-model="keyword1" placeholder="请输入关键词" suffix-icon="el-icon-search"/>
      </div>
      <div class="elTree1">
        <div class="elTree2">
          <el-tree v-loading="loading" ref="tree1" :data="houseDevices" :default-expand-all="expandAll" :default-checked-keys="checkedIds"
                   :default-expanded-keys="expandedIds" :highlight-current="true" :filter-node-method="filterNode"
                   :expand-on-click-node="expandOnClick" :props="defaultProps" :show-checkbox="isCheck" node-key="id"
                   @check="checkClick" @node-click="handleNodeClick"
          >
            <span class="custom-tree-node" slot-scope="{ node, data }">
              <span v-if="data.key === 'building'"><svg-icon :style="{color: mainColor}"
                                                             class-name="treeIconOther"
                                                             icon-class="nhgk_building"
              ></svg-icon> {{ '  ' }}</span>
              <span v-if="data.key === 'unit'"><svg-icon :style="{color: mainColor}" class-name="treeIconOther"
                                                         icon-class="nhgk_unit"
              ></svg-icon> {{ '  ' }}</span>
              <span v-if="data.key === 'level'">
                    <svg-icon class-name="treeIconOther" icon-class="nhgk_park"/> {{ '  ' }}
              </span>
              <span v-if="data.key === 'device'">
                <svg-icon :class="data.deviceStatus && data.deviceStatus === '0' ? 'ban' : ''" :style="{color:  mainColor}" class="treeIconOther" icon-class="nhgk_meter"></svg-icon> {{ '  ' }}</span>
              <span v-if="data.key !=='device'&&deviceNumber ==='device' ">{{ node.label + ' ' + '(' + data.deviceNum + ')' }}</span>
              <span v-if="data.key ==='device'&&deviceNumber ==='device'  " :style="{color: 'initial'}" :class="data.deviceStatus && data.deviceStatus === '0' ? 'ban' : ''">{{ node.label }}</span>

              <span v-if="deviceNumber === 'passes'"> {{ node.label + ' ' + '(' + data.passNum + ')' }}</span>

            </span>
          </el-tree>
        </div>
      </div>
    </div>
    <div v-else class="tree_div">
      <div class="search">
        <el-input v-model="keyword2" placeholder="请输入关键词" suffix-icon="el-icon-search"/>
      </div>
      <div class="elTree1">
        <div class="elTree2">
          <el-tree v-loading="loading" ref="tree2" :data="deviceList" :default-checked-keys="checkedIds" :default-expand-all="expandAll"
                   :default-expanded-keys="expandedIds" :highlight-current="true" :filter-node-method="filterNode"
                   :props="defaultProps" :show-checkbox="isCheck" node-key="id" @check="checkClick"
                   @node-click="handleNodeClick"
          >
            <span class="custom-tree-node" slot-scope="{ node, data }">
              <span v-if="data.key === 'device'">
                <svg-icon :class="data.deviceStatus && data.deviceStatus === '0' ? 'ban' : ''"
                          :style="{color: mainColor}" class="treeIconOther" icon-class="nhgk_meter"
                /> {{ '  ' }}
              </span>
              <span v-if="data.key === 'deviceList'">
                <svg-icon :style="{color: mainColor}" class="treeIconOther" icon-class="nhgk_device_list"/> {{ '  ' }}
              </span>
              <span :class="data.deviceStatus && data.deviceStatus === '0' ? 'ban' : ''" class="custom-tree-node-label">{{
                  node.label
                }}</span>
            </span>
          </el-tree>
        </div>
      </div>
    </div>
  </div>
</template>

<script>


import { houseDevicesForShowMax } from '@/api/components/treeSelect/treeData'

import { mapGetters } from 'vuex'
import $ from 'jquery'

export default {
  props: {

    isCheck: {
      type: Boolean,
      default: false
    },
    expandAll: {
      type: Boolean,
      default: false
    },
    expandOnClick: {
      type: Boolean,
      default: true
    },
    propHeight: {
      type: [Number, String],
      default: null
    },
    rightIconText: {
      type: String,
      default: '设备'
    },
    rightIconShow: {
      type: Boolean,
      default: true
    },
    showDummyAmmeter: {
      type: Boolean,
      default: true
    },
    maxLevel: {
      type: Number,
      default: 3
    },
    fetchDevices: {
      type: Function,
      required: true
    },
    deviceType: {
      type: String,
      required: true
    },
    deviceNumber: {
      type: String
    }
  },
  data() {
    return {
      loading: false,
      iconOpen1: false,
      iconOpen2: false,
      keyword1: '',
      keyword2: '',
      height: window.innerHeight * this.getRatio() - 102,
      selected: 'louyu',
      deviceList: [],
      houseDevices: [],
      defaultProps: {
        children: 'children',
        label: 'label',
        disabled: 'disabled'
      },
      checkedIds: [],
      expandedIds: ['0'],
      // 禁用
      existedIds: [],

      commonDeviceQueryParams: {}
    }
  },
  computed: {
    ...mapGetters(['mainColor'])
  },
  watch: {
    '$store.state.app.screenHeight': function() { //监听屏幕高度变化
      this.height = window.innerHeight * this.getRatio() - 100
    },
    keyword1(val) {
      this.$refs.tree1.filter(val)
    },
    keyword2(val) {
      this.$refs.tree2.filter(val)
    },
    // 告警策略回显
    houseDevices(val) {
      this.$nextTick(() => {
        if (val && val.length > 0 && this.existedIds.length > 0) {
          if (this.$refs.tree1) {
            this.existedIds.forEach(e => {
              let node = this.$refs.tree1.getNode(e)
              if (node) {
                node.data.disabled = true
              }
            })
            this.selected = ''
            setTimeout(() => {
              this.selected = 'louyu'
            }, 10)
          }
        }
      })
    },
    deviceList(val) {
      this.$nextTick(() => {
        if (val && val.length > 0 && this.existedIds.length > 0) {
          this.deviceList[0].children.forEach(d => {
            if (this.existedIds.indexOf(d.id) !== -1) {
              d.disabled = true
            }
          })
        }
      })
    }
  },
  created() {

    this.getDeviceList()

    this.getHouseDevices().then(res => {

      this.iconClick('louyu')
      // 物业管理员 左侧树展示
      if (this.$auth.hasRoleOnly('office_location')) {
        this.iconClick('louyu')
      }
    })
  },
  mounted() {
    $('.top_icon2').hover(() => {
      $('.top_icon2').css('color', this.$store.getters.mainColor)
      $('.top_icon2').css('border-color', this.$store.getters.mainColor)
    }, () => {
      if (this.selected !== 'shebei') {
        $('.top_icon2').css('color', '#000000')
        $('.top_icon2').css('border-color', 'rgba(0, 0, 0, 0.2)')
      }
    })
    $('.top_icon1').hover(() => {
      $('.top_icon1').css('color', this.$store.getters.mainColor)
      $('.top_icon1').css('border-color', this.$store.getters.mainColor)
    }, () => {
      if (this.selected !== 'louyu') {
        $('.top_icon1').css('color', '#000000')
        $('.top_icon1').css('border-color', 'rgba(0, 0, 0, 0.2)')
      }
    })
    $('.top_icon1').css('color', this.$store.getters.mainColor)
    $('.top_icon1').css('border-color', this.$store.getters.mainColor)
    this.$bus.$on('setSelectedDevice', (deviceIds, existedIds) => {
      if (deviceIds) {
        this.checkedIds = deviceIds.toString().split(',')
        this.$emit('checkedChange', this.checkedIds)
      }
      //设置禁选
      this.existedIds = existedIds
    })

  },
  methods: {
    getDeviceList() {
      this.loading = true
      this.fetchDevices({}).then(res => {
        res.rows.forEach(r => {
          this.deviceList.push({
            id: r.id,
            label: r.name,
            key: 'device',
            children: [],
            code: r.code,
            deviceStatus: r.status
          })
        })
        if (this.deviceList.length > 0) {
          this.$emit('firstDeviceId', this.deviceList[0].id)
        }
        this.deviceList = [{ id: '0', label: '设备列表', key: 'deviceList', children: this.deviceList }]
        this.loading = false
      })

    },
    getHouseDevices() {

      this.loading = true
      return houseDevicesForShowMax({ 'params': { maxLevel: 3, 'deviceType': this.deviceType } }).then(res => {
        this.houseDevices = res.data

        let count = 0
        let passNum = 0

        this.houseDevices.forEach(item => {
          if (item.deviceNum) {
            count += item.deviceNum
          }
          if (item.passNum) {
            passNum += item.passNum
          }
        })
        if (this.deviceNumber === 'device') {

          this.houseDevices = [{ id: '0', label: '兴筑管理园区', key: 'garden', deviceNum: count, children: this.houseDevices }]
        } else if (this.deviceNumber === 'passes') {

          this.houseDevices = [{ id: '0', label: '兴筑管理园区', key: 'garden', passNum: passNum, children: this.houseDevices }]
        }
        this.loading = false
        return res

      })
    },
    handleNodeClick(data) {
      if (this.ownerFlag) {
        if (this.buildingRegionId && this.buildingRegionId !== '') {
          let buildingRegionArr = this.buildingRegionId.split(',')
          if (buildingRegionArr.indexOf(data.id) < 0) {
            return
          }
        } else {
          return
        }
      }
      this.$emit('nodeClick', data.id, data.label, data.key, data.code)
    },
    iconClick(a) {

      this.selected = a
      if (a == 'louyu') {
        $('.top_icon1').css('color', '#2d303b')
        $('.top_icon1').css('border-color', '#2d303b')
        $('.top_icon2').css('color', '#000000')
        $('.top_icon2').css('border-color', 'rgba(0, 0, 0, 0.2)')

        this.$nextTick(() => {
          this.$refs.tree1.filter(this.keyword1)
        })

      }
      if (a == 'shebei') {
        $('.top_icon2').css('color', '#2d303b')
        $('.top_icon2').css('border-color', '#2d303b')
        $('.top_icon1').css('color', '#000000')
        $('.top_icon1').css('border-color', 'rgba(0, 0, 0, 0.2)')
        this.$nextTick(() => {
          this.$refs.tree2.filter(this.keyword2)
        })
      }
    },
    filterNode(value, data, node) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    iconEnter(flag) {
      if (flag === 1) {
        this.iconOpen1 = true
      } else {
        this.iconOpen2 = true
      }
    },
    iconMove(flag) {
      if (flag === 1) {
        this.iconOpen1 = false
      } else {
        this.iconOpen2 = false
      }
    },

    /* 告警策略相关方法 */
    checkClick(a, b, c) {
      this.checkedIds = b.checkedNodes.filter(c => c.key === 'device').map(d => d.id)
      this.$emit('checkedChange', this.checkedIds)
    }

  }
}
</script>

<style scoped>
.ban {
  color: red !important;
}

.body_ {
  background-color: #fff;
  position: relative;
}

.tree_div {
  height: calc(100% - 67px);
  position: relative;
}

.elTree1 {
  height: calc(100% - 41px);
  overflow-y: auto;
}

.search {
  width: 95%;
  margin: 7px auto 5px auto;
  /*margin-top: 7px;*/
}

.top_container {
  height: 60px;
  border-bottom: 1px solid rgba(0, 0, 0, .1);
}

.top_icon1 {
  font-size: 30px;
  transition: all .1s linear;
  display: inline-block;
  padding: 4px 5px;
  border: 1px rgba(0, 0, 0, 0.2) solid;
  margin: 16px 6px 0 27px;
  color: #000000;
}

.top_icon2 {
  font-size: 30px;
  transition: all .1s linear;
  display: inline-block;
  padding: 4px 5px;
  border: 1px rgba(0, 0, 0, 0.2) solid;
  margin: 16px 6px 0 27px;
  color: #000000;
}

.top_icon1:last-child {
  margin-left: 0
}

.top_icon2:last-child {
  margin-left: 0
}

.top_icon1:hover {
  cursor: pointer;
  color: #000000;
  border-color: rgba(0, 0, 0, 0.2);
}

.top_icon2:hover {
  cursor: pointer;
  color: #000000;
  border-color: rgba(0, 0, 0, 0.2);
}

.treeIcon {
  font-size: 16px;
  /*color: #409EFF;*/
}

.treeIconOther {
  height: 13px !important;
  width: 13px !important;
  vertical-align: -2px !important;
}

.el-tree-node > .el-tree-node__children {
  overflow: visible;
}
</style>
